<script lang="ts" setup>
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { ElAvatar } from 'element-plus';

const data = ref();

const [Modal, modalApi] = useVbenModal({
  onOpenChange(isOpen) {
    if (isOpen) {
      data.value = isOpen ? modalApi.getData() : null;
    }
  },
});
defineExpose(modalApi);
</script>
<template>
  <Modal class="w-[600px]" title="添加数据">
    {{ data }}
    <ElAvatar
      shape="square"
      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    />
  </Modal>
</template>
